<template>
	<view v-if="item" class="wrap-item">
		<view class="title-bg">
			<view class="must" v-if="item.hasOwnProperty('require') && item.require">
				*
			</view>
			
			<view class="title">
				{{ item.title }}
			</view>
		</view>
		
		<view class="wrap-right m-t-30">
			<input
				class="input"
				:placeholder="item.place"
				placeholder-class="place"
				:type="item.hasOwnProperty('mode') ? item.mode : 'text'"
				v-model="modelValue"
				maxlength="-1"
				:disabled="item.hasOwnProperty('disabled') ? item.disabled : false"
			/>
			
			<image
				v-if="item.hasOwnProperty('isOcr') && item.isOcr"
				class="camera"
				mode="heightFix"
				:src="$staticImagePath('store/orc.png')"
				@click="onCamera"
			/>
		</view>
	</view>
</template>

<script>
	import { BizLicenseOCR } from "@/utils/API.js";
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		watch: {
			"modelValue": {
				handler() {
					if (this.maxLength > 0) {
						setTimeout(() => {
							this.modelValue = this.modelValue.substr(0, this.maxLength);
						}, 0);
					}
				},
				immediate: true,
			},
		},
		computed: {
			/**
			 * 最大长度
			 */
			maxLength() {
				var number = -1;
				if (this.item && this.item.hasOwnProperty("maxlength")) {
					number = this.item.maxlength;
				}
				return number;
			},
			/**
			 * 输入的value
			 */
			modelValue: {
				set(val) {
					this.$emit("input", val);
				},
				get() {
					return this.value
				}
			},
			/**
			 * 识别的类型
			 */
			ocrType() {
				var type = "IdCard";
				
				if (this.item) {
					if (this.item.hasOwnProperty("ocrType")) {
						type = this.item.ocrType;
					}
				}
				
				return type;
			},
		},
		methods: {
			/**
			 * 点击识别
			 */
			onCamera() {
				this.$filters.onChooseImage(1, (res) => {
					this.onUpload(res[0]);
				});
			},
			/**
			 * 上传图片
			 */
			onUpload(file) {
				this.$commonNetwork.onUploadFile(file, (res) => {
					this.onOcrData(res.url);
				});
			},
			/**
			 * 识别
			 */
			onOcrData(url) {
				BizLicenseOCR({
					image_url: url
				}).then(res => {
					this.$emit("ocrData", res.data);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../css/form.css";
	
	.wrap-right {
		width: 100%;
		gap: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.camera {
		width: auto;
		height: 35rpx;
		overflow: hidden;
	}
</style>